<!-- 设置 -->
<template>
	<view>
		<u-cell-group>
			<u-cell-item title="修改登陆密码" :index="1" @click="clickModel"></u-cell-item>
			<u-cell-item title="修改交易密码" :index="7" @click="clickModel"></u-cell-item>
			<u-cell-item title="修改手机" :index="2" @click="clickModel"></u-cell-item>
			<u-cell-item title="关于我们" :index="3" @click="clickModel"></u-cell-item>
			<u-cell-item title="常见问题" :index="4" @click="clickModel"></u-cell-item>
			<u-cell-item title="联系客服" :index="5" @click="clickModel"></u-cell-item>
			<u-cell-item :title-style="{color:'#fa3534'}" title="退出登录" :index="6" @click="clickModel"></u-cell-item>
		</u-cell-group>
		<u-modal v-model="editPayPasswordShow" :show-title="false" :show-cancel-button="true"
			confirm-text="修改" confirm-color="#20cbd4" @confirm="editPayPassword">
			<view class="slot-content">
				<u-field class="contentItem"
					v-model="old_pass"
					:password="true"
					labelWidth="180"
					label="旧交易密码"
					placeholder="请填写旧交易密码"></u-field>
				<u-field class="contentItem"
					v-model="new_pass"
					:password="true"
					labelWidth="180"
					label="新交易密码"
					placeholder="请填写新交易密码"></u-field>
				<u-field class="contentItem"
					v-model="confirm_pass"
					:password="true"
					labelWidth="180"
					label="确认交易密码"
					placeholder="请填写确认交易密码"></u-field>
			</view>
		</u-modal>
		<u-modal v-model="editPasswordShow" :show-title="false" :show-cancel-button="true"
			confirm-text="修改" confirm-color="#20cbd4" @confirm="editPassword">
			<view class="slot-content">
				<u-field class="contentItem"
					v-model="old_password"
					:password="true"
					label="旧密码"
					placeholder="请填写旧密码"></u-field>
				<u-field class="contentItem"
					v-model="password"
					:password="true"
					label="新密码"
					placeholder="请填写新密码(长度为6-16位)"></u-field>
				<u-field class="contentItem"
					v-model="confrimPassword"
					:password="true"
					label="确认密码"
					placeholder="请填写确认密码(长度为6-16位)"></u-field>
			</view>
		</u-modal>
		<u-modal v-model="editPhoneShow" :show-title="false" :show-cancel-button="true"
			confirm-text="修改" confirm-color="#20cbd4" @confirm="editPhone">
			<view class="slot-content">
				<u-field class="contentItem"
					v-model="nowPhoneNumber"
					label="现手机号"
					placeholder="请填写现手机号"></u-field>
				<u-field class="contentItem"
					v-model="nowCode"
					label="验证码"
					placeholder="请填写验证码"
				>	<u-button size="mini" slot="right" :custom-style="{background:'#20cbd4',border:'#fff',color:'#fff'}" @click="getCodeNow">{{codeTextNow}}</u-button>
				</u-field>
				<u-field class="contentItem"
					v-model="phoneNumber"
					label="新手机号"
					placeholder="请填写新手机号"></u-field>
				<u-field class="contentItem"
					v-model="code"
					label="验证码"
					placeholder="请填写验证码"
				>
					<u-button size="mini" slot="right" :custom-style="{background:'#20cbd4',border:'#fff',color:'#fff'}" @click="getCode">{{codeText}}</u-button>
				</u-field>
				<u-verification-code ref="uCode" @change="codeChange" unique-key="modnew"></u-verification-code>
				<u-verification-code ref="uNCode" @change="nowCodeChange" unique-key="modnow"></u-verification-code>
			</view>
		</u-modal>
		<u-modal v-model="aboutShow" title="关于我们" confirm-text="关闭" confirm-color="#909399">
			<scroll-view scroll-y class="slot-content about">
				<rich-text :nodes="content"></rich-text>
			</scroll-view>
		</u-modal>
		<u-toast ref="uToast" />
		<hoverMenu></hoverMenu>
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import {editPassword,getPhoneCode,getPhoneCodeNow,editPhone,clearToken,getXieyi,editPayPass} from "@/common/api.js";
export default {
	components: {
		hoverMenu
	},
	data() {
		return {
			editPasswordShow:false,
			editPayPasswordShow:false,
			editPhoneShow:false,
			aboutShow:false,
			nowPhoneNumber:"",
			phoneNumber:"",
			nowCode:"",
			code:"",
			codeTextNow: '',
			codeText: '',
			old_password:'',
			password:'',
			confrimPassword:'',
			content:'',
			old_pass:'',
			new_pass:'',
			confirm_pass:'',
		};
	},
	onShow(){
		var userPhone = uni.getStorageSync('userPhone');
		this.nowPhoneNumber = userPhone
	},
	computed: {
	},
	methods: {
		floatTouchClick(index){
			this.$uniApi.floatTouch(index);
		},
		clickModel(index){
			var that = this;
			if(index==1){
				that.editPasswordShow=true;
			}else if(index==2){
				that.editPhoneShow=true;
			}else if(index==3){
				getXieyi(this,{type:3});
				that.aboutShow=true;
			}else if(index==4){
				uni.navigateTo({
					url:"/user/problem"
				})
			}else if(index==5){
				uni.navigateTo({
					url:"/pages/views/showhfive"
				})
			}else if(index==7){
				that.editPayPasswordShow=true;
			}else{
				uni.redirectTo({
					url:"/login/login",
					success() {
						uni.removeStorageSync("Authori-zation");
						uni.removeStorageSync("openid");
						uni.removeStorageSync("openidGzh");
						uni.removeStorageSync("userLevel");
						uni.removeStorageSync("userBaseInfo");
						uni.removeStorageSync("userPhone");
						uni.removeStorageSync("address");
						clearToken(that,{});
					}
				})
			}
		},
		editPassword(){
			this.editPasswordShow=true;
			if(this.old_password==''){
				this.$refs.uToast.show({title: '请输入旧密码',})
				return;
			}
			if(this.password==''){
				this.$refs.uToast.show({title: '请输入新密码',})
				return;
			}
			if(!this.$u.test.rangeLength(this.password, [6, 16])){
				this.$refs.uToast.show({title: '您输入的新密码不正确'});
				return;
			}
			if(this.confrimPassword==''){
				this.$refs.uToast.show({title: '请输入确认密码',})
				return;
			}
			if(!this.$u.test.rangeLength(this.confrimPassword, [6, 16])){
				this.$refs.uToast.show({title: '您输入的确认密码不正确'});
				return;
			}
			if(this.password != this.confrimPassword){
				this.$refs.uToast.show({title: '2次输入密码不相同'});
				return;
			}
			editPassword(this,{old_password:this.old_password,new_password:this.password})
		},
		editPayPassword(){
			this.editPayPasswordShow=true;
			if(this.new_pass==''){
				this.$refs.uToast.show({title: '请输入新密码',})
				return;
			}
			if(this.confirm_pass==''){
				this.$refs.uToast.show({title: '请输入确认密码',})
				return;
			}
			if(this.new_pass != this.confirm_pass){
				this.$refs.uToast.show({title: '2次输入密码不相同'});
				return;
			}
			editPayPass(this,{old_pass:this.old_pass,new_pass:this.new_pass,confirm_pass:this.confirm_pass})
		},
		editPhone(){
			this.editPhoneShow=true;
			if(!this.$u.test.mobile(this.nowPhoneNumber)){
				this.$refs.uToast.show({title: '请输入现手机号',})
				return;
			}
			if(!this.$u.test.mobile(this.phoneNumber)){
				this.$refs.uToast.show({title: '请输入新手机号',})
				return;
			}
			if(this.nowCode=='' || this.code==''){
				this.$refs.uToast.show({title: '请输入验证码',})
				return;
			}
			editPhone(this,{now_phone: this.nowPhoneNumber, phone:this.phoneNumber, type:'edit_phone', now_code:this.nowCode, code:this.code})
		},
		codeChange(text) {
			this.codeText = text;
		},
		nowCodeChange(text) {
			this.codeTextNow = text;
		},
		getCode() {
			if(!this.$u.test.mobile(this.phoneNumber)){
				this.$refs.uToast.show({title: '您输入的手机号不正确'});
				return;
			}
			if(this.$refs.uCode.canGetCode) {
				uni.showLoading({
					title: '正在获取验证码',
					mask: true
				})
				getPhoneCode(this,{phone:this.phoneNumber,type:"edit_phone"})
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		getCodeNow() {
			if(!this.$u.test.mobile(this.nowPhoneNumber)){
				this.$refs.uToast.show({title: '您输入的手机号不正确'});
				return;
			}
			if(this.$refs.uNCode.canGetCode) {
				uni.showLoading({
					title: '正在获取验证码',
					mask: true
				})
				getPhoneCodeNow(this,{phone:this.nowPhoneNumber,type:"edit_phone_now"})
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		}
	}
};
</script>

<style lang="scss">
	.slot-content{
		padding: 30rpx 20rpx;
	}
	.contentItem{
		margin-bottom: 30rpx ;
	}
	.about{
		max-height: 900rpx;
		width: 550rpx;
	}
</style>
